<template>
  <div>
    
    <h2>全选框案例</h2>

    <label for="all">全选:</label>
    <input type="checkbox" id="all" v-model="xxx"/>
    <ul>
      <li v-for="item in arr" :key="item.name">
        <input type="checkbox" v-model="item.c"/>
        <span>{{ item.name }}</span>
      </li>
    </ul>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: '猪八戒', c: false },
        { name: '孙悟空', c: false },
        { name: '唐僧', c: false },
        { name: '白龙马', c: false }
      ]
    }
  },
    // 计算属性，计算大框的选中状态
    computed: {
      xxx: {
        get () {
          return this.arr.every(item => item.c === true)
        // return this.arr.every(item => {
        //   return item.c === true
        // })
        },
        set (val) {
          console.log(val)
          this.arr.forEach(item => {
            item.c = val     //  把true或者false，赋值给item.c
          })
        }
      }
    }
}
</script>


<style>

</style>
